﻿<!-- Maps -->
<div class="wrap-map">
	<div class="map_google" id="map"></div>
</div>

<div class="list-location">
	<ul id="sidebar_1" class="nosl nomargin"></ul>
</div>


<?php
$the_query = new WP_Query(array(
	'post_type' => 'cua-hang',
	'orderby' => 'meta_value',
	'meta_key' => 'store_order',
	'order' => 'asc',
	'status' => 'publish',
	'posts_per_page' => -1
));
$locations = array();
while($the_query->have_posts()){ $the_query->the_post();
	$id_post = get_the_ID();
	/* lay toa do */
	list($_X,$_Y) = explode(",",get_post_meta($id_post,"position_google_map",true));
	list($_src) = wp_get_attachment_image_src(get_post_thumbnail_id(),"thumbnail");
	$locations[] = array(
		"id" => $id_post ,
		"name" => get_the_title(),
		"image" => $_src,
		"address" => get_post_meta($id_post,"address",true),
		"phone" => get_post_meta($id_post,"phone",true),
		"pos_x" => $_X,
		"pos_y" => $_Y 
	);
}
wp_reset_query();
$address_first = $locations[0];
?>

<!---------------------------------------------------------  -->

<script type="text/javascript">
var $K2 = jQuery;
/**

 * map

 */

var mapOpts = {

  mapTypeId: google.maps.MapTypeId.ROADMAP,

/*  scaleControl: true,

  scrollwheel: true,

  disableDefaultUI: true,

  */

  zoom: 14,

//$address_first['pos_x']
//$address_first['pos_y']
  center: new google.maps.LatLng(<?php echo 123;?>, <?php echo 123;?>)

}

var map = new google.maps.Map(document.getElementById("map"), mapOpts);

//  We set zoom and center later by fitBounds()



/**

 * makeMarker() ver 0.2

 * creates Marker and InfoWindow on a Map() named 'map'

 * creates sidebar row in a DIV 'sidebar'

 * saves marker to markerArray and markerBounds

 * @param options object for Marker, InfoWindow and SidebarItem

 * @author Esa 2009

 */



var infoWindow = new google.maps.InfoWindow();

var markerBounds = new google.maps.LatLngBounds();

var markerArray = [];



function makeMarker(options){

  var pushPin = new google.maps.Marker({map:map});

  pushPin.setOptions(options);

  google.maps.event.addListener(pushPin, "click", function(){

	infoWindow.setOptions(options);

	infoWindow.open(map, pushPin);

	map.panTo(pushPin.getPosition());

	if(this.sidebarButton)this.sidebarButton.button.focus();

  });

  var myString =pushPin.getIcon();
  var stringParts = myString.split("#");

  

  var idleIcon =   stringParts[0];

  if(options.sidebarItem){

	pushPin.sidebarButton = new SidebarItem(pushPin, options);    

	pushPin.sidebarButton.addIn("sidebar",/*stringParts[1]*/ "1");

  }

  markerBounds.extend(options.position);

  markerArray.push(pushPin);

  return pushPin;

}





google.maps.event.addListener(map, "click", function(){

  infoWindow.close();

});



/**

 * Creates an sidebar item 

 * @constructor

 * @author Esa 2009

 * @param marker

 * @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,

 */

function SidebarItem(marker, opts){

  var tag = opts.sidebarItemType || "li";
  
  var row = document.createElement(tag);

  row.innerHTML = opts.sidebarItem;

  row.className = opts.sidebarItemClassName || "sidebar_item";  

  row.style.display = "";

  //row.style.width = opts.sidebarItemWidth || "120px";

  row.onclick = function(){

	google.maps.event.trigger(marker, 'click');

	

  }

  row.onmouseover = function(){

	google.maps.event.trigger(marker, 'mouseover');

  }

  row.onmouseout = function(){

	google.maps.event.trigger(marker, 'mouseout');

  }

  this.button = row;

  google.maps.event.trigger(marker, 'click');

}

// adds a sidebar item to a <div>



SidebarItem.prototype.addIn = function(block,num){



 var idsidebar="#sidebar_"+num

 $K2(idsidebar).append(this.button); 

}

// deletes a sidebar item

SidebarItem.prototype.remove = function(){

  if(!this.div) return false;

  this.div.removeChild(this.button);

  return true;

}

/**

 * markers and info window contents

 */

  

<?php foreach($locations as $key=>$local) {
	$cls_location=($key==0)?' currentLocation':''; ?>
	
	makeMarker({
	
	  position: new google.maps.LatLng(<?php echo $local['pos_x'] ?>, <?php echo $local['pos_y'] ?>),
	
	  title: "<?php echo $local['name'] ?> ",
	
	  sidebarItem: "<a id='map_<?php echo $local['id']?>' class='hrefa<?php echo $cls_location;?>'><h4 class='catTitle'><?php echo $local['name']?></h4><p class='catTitle2'><?php echo $local['address']?></p><p class='catTitle2 bold'><?php echo "Điện thoại".': '.$local['phone'];?></p></a>",
	
	  icon: '<?php echo get_template_directory_uri();?>/images/icons/red-dot.png',
	
	  content: "<div class='contentmap'><div class='imgmap'><img src='<?php echo $local['image'];?>' alt=''/></div><h4><?php echo $local['name'];?></h4><p><b>Điện thoại: </b></b> <?php echo $local['address'];?> <br> <b>Điện thoại :</b> <?php echo $local['phone'];?></p></div>"
	
	});    

<?php } ?>

<?php if(is_page('lien-he')){ ?>

 makeMarker({

  position: new google.maps.LatLng(<?php echo $address_first['pos_x'] ?>, <?php echo $address_first['pos_y'] ?>),

  title: "<?php echo $address_first['name'] ?>",

  sidebarItem: "<a class='hrefa<?php echo $cls_location;?>'><h4 class='catTitle'><?php echo $address_first['name'] ?></h4><p class='catTitle2'><?php echo $address_first['address'] ?></p><p class='catTitle2 bold'>Điện thoại:<?php echo $address_first['phone'] ?></p></a>",

   icon: '<?php echo get_template_directory_uri();?>/images/icons/red-dot.png',

  content: "<div class='contentmap'><div class='imgmap'><img src='<?php echo $address_first['image'] ?>' alt=''/></div><h4><?php echo $address_first['name'] ?></h4><p><b>Điện thoại : </b></b> <?php echo $address_first['address'] ?> <br> <b>Điện thoại :</b> <?php echo $address_first['phone'] ?></p></div>"

});
  
<?php } ?>
</script>
<!-----------Map  -->
<div class="clearfix"></div>